<template>
  <div>个人信息</div>
  <el-card>
    <el-form
      :model="userInfoForm"
      :rules="rules"
      ref="userInfoFormRef"
      label-width="auto"
      style="max-width: 600px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="userInfoForm.name">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="emil">
            <el-input v-model="userInfoForm.emil">
              <template #prefix>
                <el-icon><Message /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model.number="userInfoForm.phone">
              <template #prefix>
                <el-icon><Iphone /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select
              v-model="userInfoForm.sex"
              placeholder="请选择性别"
              style="width: 240px"
            >
              <el-option label="男" :value="1" />
              <el-option label="女" :value="0" />
            </el-select>
            <template #prefix>
              <el-icon><UserFilled /></el-icon>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="宿舍号" prop="num">
            <el-input v-model="userInfoForm.num">
              <template #prefix>
                <el-icon><House /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="家长联系方式" prop="parentPhone">
            <el-input v-model="userInfoForm.parentPhone">
              <template #prefix>
                <el-icon><PhoneFilled /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="家长姓名" prop="parentName">
            <el-input v-model="userInfoForm.parentName">
              <template #prefix>
                <el-icon><Avatar /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="教师姓名" prop="teacherName">
            <el-input v-model="userInfoForm.teacherName">
              <template #prefix>
                <el-icon><Avatar /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-row>
    </el-form>
  </el-card>
</template>

<script setup>
import { getuserInfo, putuserInfo } from "@/api/stuuserInfo";
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
const userInfoForm = reactive({
  teacherName: "",
  phone: null,
  emil: "",
  updateTime: "",
});
const userInfoFormRef = ref(null);

// 表单验证规则
const rules = {
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  emil: [
    { required: true, message: "请输入邮箱地址", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱地址格式",
      trigger: ["blur", "change"],
    },
  ],
  phone: [
    { required: true, message: "请输入手机号码", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],
  sex: [{ required: true, message: "请选择性别", trigger: "change" }],
  num: [{ required: true, message: "请输入宿舍号", trigger: "blur" }],
  parentPhone: [
    { required: true, message: "请输入家长联系方式", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "家长联系方式格式不正确",
      trigger: "blur",
    },
  ],
  parentName: [{ required: true, message: "请输入家长姓名", trigger: "blur" }],
  teacherName: [{ required: true, message: "请输入教师姓名", trigger: "blur" }],
};

// 提交函数
const onSubmit = async () => {
  try {
    await userInfoFormRef.value.validate();
    const response = await putuserInfo(userInfoForm);
    if (response.data.code === 200) {
      ElMessage.success("信息更新成功");
    } else {
      ElMessage.error("信息更新失败：" + response.message);
    }
  } catch (error) {
    console.error("提交失败:", error);
    ElMessage.error("提交失败");
  }
};

onMounted(() => {
  fetchUserInfo();
});

// 获取数据
// 获取数据
const fetchUserInfo = async () => {
  try {
    const res = await getuserInfo();
    userInfoForm.name = res.data.data.name || "";
    userInfoForm.emil = res.data.data.emil || "";
    userInfoForm.phone = res.data.data.phone
      ? Number(res.data.data.phone)
      : null;
    userInfoForm.sex = res.data.data.sex === 1 ? "男" : "女";
    userInfoForm.num = res.data.data.num || "";
    userInfoForm.parentPhone = res.data.data.parentPhone || "";
    userInfoForm.parentName = res.data.data.parentName || "";
    userInfoForm.teacherName = res.data.data.teacherName || "";
  } catch (error) {
    console.error("获取用户信息失败:", error);
    ElMessage.error("获取用户信息失败");
  }
};
</script>

<style scoped></style>
